import { DropTargetMonitor, DropTarget, DropTargetConnector } from 'react-dnd';
import React, { useState } from 'react';
import { Row } from 'antd';
import DragAntd from '../DragAntd';
import ContainerCol from '../ContainerCol';
import ZtBanner from '../DragZt/Banner';
import ZtCourse from '../DragZt/Course';
import QueryTable from '../ProComponents/QueryTable';

import styles from './index.less';

// 设置主题

const CenterDesign = (param: any) => {
  const { canDrop, isOver, cardList, changeCardList, connectDropTarget } =
    param;

  const isActive = canDrop && isOver;
  let backgroundColor = '';
  if (isActive) {
    backgroundColor = 'darkgreen';
  } else if (canDrop) {
    backgroundColor = 'darkkhaki';
  }

  // todo form容器组件 ，table 组件，栅格组件
  function onClickShowAttr(param: any) {
    console.log('param', param);
  }

  return (
    <>
      {cardList.map((item: any, index: number) => {
        let content = <div key={index.toString()}>tstat</div>;
        switch (item.comName) {
          case 'root':
            content = (
              <div ref={connectDropTarget} className={styles.centerDesignRoot}>
                <CenterDesign
                  {...item}
                  cardList={item.children}
                  changeCardList={changeCardList}
                />
              </div>
            );
            break;
          case 'row':
            content = (
              <Row>
                <CenterDesign
                  cardList={item.children}
                  changeCardList={changeCardList}
                />
              </Row>
            );
            break;

          case 'col':
            content = (
              <ContainerCol cardList={item} changeCardList={changeCardList} />
            );
            break;
          case 'ztBanner':
            content = <ZtBanner property={item} />;
            break;
          case 'ztCourse':
            content = <ZtCourse property={item} />;
            break;
          case 'queryTable':
            content = <QueryTable property={item} />;
            break;
          case 'input':
          case 'inputNumber':
          case 'select':
          case 'switch':
          case 'datePicker':
          case 'timePicker':
          case 'treeSelect':
          case 'tree':
          case 'checkbox':
          case 'radio':
          case 'rate':
          case 'table':
          case 'button':
            content = <DragAntd property={item} />;
            break;
        }
        return content;
      })}
    </>
  );
};

export default DropTarget(
  'box',
  {
    drop: (props, monitor, component) => {
      // 如果 children 已经作为了 drop target，不处理
      const didDrop = monitor.didDrop();
      if (didDrop) {
        return;
      }
      return props.cardList[0];
    },
  },
  (connect: DropTargetConnector, monitor: DropTargetMonitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop(),
  }),
)(CenterDesign);
